
<template>
  <div class="box">
    <div id="map" class="map"></div>
  </div>
</template>
  <script>
const xiaoshanMapMoudle = require("@/libs/xiaoshan.js");
const xiaoshanMap = xiaoshanMapMoudle.xiaoshanMap;
export default {
  data() {
    return {};
  },
  created() {},
  mounted: function () {
    this.initGeo();
  },

  methods: {
    initGeo() {
      this.myChart = this.$echarts.init(document.getElementById("map"));
      this.$echarts.registerMap("jiangshan", xiaoshanMap);
      var data = [
        { name: "萧山区特殊教育学校", value: 1 },
        { name: "浦阳江卫星班", value: 2 },
        { name: "新街三小卫星班", value: 2 },
        { name: "靖江一小", value: 3 },
        { name: "宁围小学", value: 3 },
        { name: "所前二小", value: 3 },
        { name: "益农镇小", value: 3 },
        { name: "党湾一小", value: 3 },
        { name: "大桥小学", value: 3 },
        { name: "东藩小学", value: 3 },

        
      ];
      var geoCoordMap = {
        萧山区特殊教育学校: [120.247791, 30.107619],
        浦阳江卫星班: [120.251405, 29.974714],
        新街三小卫星班: [120.363687, 30.181597],
        靖江一小: [120.474496, 30.224342],
        宁围小学: [120.275703, 30.207014],
        所前二小: [120.285201, 30.120683],
        益农镇小: [120.590872, 30.180417],
        党湾一小: [120.552041, 30.224851],
        大桥小学: [120.196302, 29.970252],
        东藩小学: [120.252823, 30.051114 ],
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };

      var option = {
        tooltip: {
          trigger: "item",
        },
        toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    saveAsImage: {show: true,backgroundColor: '#081125'},
                }
            },

        // 地图得用这个GEo
        geo: {
          map: "jiangshan",
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "#fff",
              offset: [10, 10] 
            },
          },
          roam: true,
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "#142957",
              borderColor: "#0692a4",
              borderWidth: 1,
            },
            // 高亮区域
            emphasis: {
              areaColor: "rgb(230, 235, 242)",
            },
          },
        },
        data:[
            {
                name: '东片',
                value: [120.58173755098096,30.18601622518869],
                label: {
                    offset: [200, 0], // 将北京市的标注偏移10个像素向右
                },
            },
        ],
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function (val) {
              if (val[2] == 1) {
                return 30;
              } else if (val[2] == 2) {
                return 18;
              } else {
                return 8;
              }
            },
           
       
            itemStyle: {
                // 点的颜色
              color: (parames) => {
                if (parames.value[2] == 1) {
                  return "#FFD321";
                } else if (parames.value[2] == 2) {
                  return "#A67FFF";
                } else if (parames.value[2] == 3) {
                  return "#2BC6A6";
                  
                }
              },
            },
            tooltip: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data), 
            symbolSize: function (val) {
              if (val[2] == 1) {
                return 2;
              } else if (val[2] == 2) {
                return 1;
              } else {
                return 0.5;
              }
            },
           
            showEffectOn: "render",
            rippleEffect: {
              period: 4, // 涟漪动画周期
              scale: 100, // 涟漪动画中波纹的最大缩放比例
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position:"right",
              show: true,
              color: (parames) => {
                if (parames.value[2] == 1) {
                  return "#FFD321";
                } else if (parames.value[2] == 2) {
                  return "#A67FFF";
                } else if (parames.value[2] == 3) {
                  return "#2BC6A6";
                }
                
              },
              fontWeight: 700,
            },
            itemStyle: {
              normal: {
                color:  (parames) => {
                if (parames.value[2] == 1) {
                  return "#FFD321";
                } else if (parames.value[2] == 2) {
                  return "#A67FFF";
                } else if (parames.value[2] == 3) {
                  return "#2BC6A6";
                }
                
              },
                shadowBlur: 20,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
  <style scoped >
.box {
  width: 100%;
  position: relative;
}
.map {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 60px;
  width: 1000px;
  height: 1000px;
}
</style>